
<template>
  <div id="cesiumContainer"></div>
</template>
    
<script>


import { createCesium } from '../cesiumjs/index.js'


export default {
  name: "CesiumMap",
  props: {
    tileSet: {
      default: ""
    },
    homeCameraView: {

    }
  },
  setup() {
    return {
      viewer: null
    };
  },
  watch: {
    tileSet(newValue, oldValue) {
      console.log(newValue, oldValue);
    }
  },
  methods: {
    loadTianditu() {
      let TOKEN_TIANDITU = '39c6ffb6b4ceb22a0dfad5975f58a495';

      this.viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=39c6ffb6b4ceb22a0dfad5975f58a495",
          layer: "tdtBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          maximumLevel: 18
        }));

        this.viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + TOKEN_TIANDITU,
          layer: "tdtAnnoLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: true,
        }));
    },
    loadGaode() {
      this.viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        maximumLevel: 18,//最大缩放级别
        url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
        style: "default",
        format: "image/png",
        tileMatrixSetID: "GoogleMapsCompatible"
      }));

      this.viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          maximumLevel: 18,//最大缩放级别
          url: 'https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11',
          style: "default",
          format: "image/png",
          tileMatrixSetID: "GoogleMapsCompatible"
        })
      );
    },
    loadArcgis() {
      this.viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        baseLayerPicker: false
      }));
    }
  },
  mounted() {

    let _viewer = createCesium('cesiumContainer');
    this.viewer = _viewer;

    if (this.tileSet) {
      let tileset = new Cesium.Cesium3DTileset(this.tileSet);

      _viewer.scene.primitives.add(tileset);
      _viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0));
    }

    if (this.homeCameraView) {
      _viewer.camera.setView({
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: Cesium.Cartesian3.fromDegrees(
          this.homeCameraView.longitude,
          this.homeCameraView.latitude,
          this.homeCameraView.height
        ),
        orientation: {
          // 方向
          heading: Cesium.Math.toRadians(this.homeCameraView.heading),
          // 视角
          pitch: Cesium.Math.toRadians(this.homeCameraView.pitch),
          // 倾斜角度
          roll: Cesium.Math.toRadians(this.homeCameraView.roll),
        },
      });
    }

  }
};
</script>
  
<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  margin: 0;
  /* position: fixed; */
}
</style>
  